bootstrap - 弹出层

弹出层包括模态对话框、提示条、popover、alert。它们都可以用来提示或者警告用户，或者显示详细信息。

模态对话框

模态对话框就是一个对话框，它在继续下一步工作前来提示重要信息给用户，并可能会要求用户做出不同操作的选择。

如下代码可以点击一个按钮，弹出模态对话框：

<a class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch</a>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">title1</h4>
            </div>
            <div class="modal-body">
                <p>Body1</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

模态对话框的DOM结构嵌套的有点深。使用类来表达这个层次，看起来是这样的：

-.modal
--.modal-content
----.modal-header
----.modal-body
----.modal-footer

就是说，一个模态对话框内部有header、body、footer构成。可以使用data属性来做模态对话框的弹出和关闭。第一行代码中的data-toggle="modal"表示做模态切换，data-target="#myModal"表示切换的目标为id等于myModal的元素。另外应该说明的是这行代码：

<button type="button" class="close" data-dismiss="modal">&times;</button>

其中的内容×表示的就是乘号（✖️），常常用来做关闭按钮的图标。类似的这个按钮也使用了data属性（data-dismiss="modal"）做模态关闭。

tooltip

当鼠标移动到a标签上，默认会显示一个提示条，内容为title指定的：

<a href="#" title="tooltip">foo</a>

想要这个提示条酷一点的话，可以加入两个data属性：

<a href="#" data-toggle="tooltip" data-placement="right" title="tooltip">foo</a>

并且加入JavaScript代码：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

属性data-placement只是提示条的位置，可以是“top | bottom | left | right | auto”。我们再次看到data-toggle，这里是切换tooltip的显示。

一个看起来比较符合bootstrap风味的提示条就出来了。

popover

用来显示当前元素的补充信息。和提示条（tooltip）只能有内容相比，前者显示信息可以由页头和主体。代码如下：

 <button type="button" class="btn btn-primary" data-toggle="popover" title="title" data-content="content">Popover</button>

并且需要加入JavaScript代码，用来启动popover，并设置它的显示位置：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'right'
    });
});

你需要为当前元素加入属性data-toggle="popover"表示做popover切换，title="title"放入popover的标题，data-content="content"放入popover的内容。

alert

用来弹出需要用户立刻注意到，如警告和确认类的信息。比如：

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> There was a problem with your network connection.
</div>

这是一个alert，类型为alert-warning，因此是一个警告型的alert。相应的，还可以选择alert-danger、alert-info、alert-success等类型。

代码：

<a href="#" class="close" data-dismiss="alert">&times;</a>

提供了一个关闭按钮，它的data-dismiss="alert"属性表明，点击之可以关闭alert。